<template>
  <div class="login">
    <el-form ref="form" :model="form" :rules="rules">
      <div class="headerPic">
        <img src="../assets/logo.png" alt="">
      </div>

      <!-- 姓名框 -->

      <el-form-item prop='username'>
        <el-input v-model="form.username" placeholder="账户"></el-input>
      </el-form-item>

      <!-- 密码框 -->

      <el-form-item prop='password'>
        <el-input v-model="form.password" placeholder="密码"></el-input>
      </el-form-item>

      <!-- 登录按钮 -->

      <el-button style="width:100%" type="primary" @click='login'>登录</el-button>
    </el-form>
  </div>
</template>

<script>
export default {

  data () {
    return {
      form: {
          username: 'admin',
          password: '123456',
        },
        rules: {
          username: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
            { min: 3, max: 8, message: '用户名长度在 3 到 8 个字符', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 3, max: 8, message: '密码长度在 3 到 8 个字符', trigger: 'blur' }
          ],
        }
    }
  },

  methods: {
    login(){
      this.$refs.form.validate(v=>{
        if(v) {
          // 表单验证成功
          this.axios.post('login',this.form).then(res=>{
            if(res.data.meta.status === 400) {
              // 密码错误提示信息
              this.$message.error(res.data.meta.msg);
            }else {
              // 验证成功
              // 登录成功在本地存储token值，用于axois拦截
              localStorage.setItem('token',res.data.data.token)
              this.$message({
                message: '登陆成功',
                type: 'success'
              });
              this.$router.push({ name:'home'})
            }
          })
        }else {
          // 表单验证失败
        }
      })
    }
  },

  created () {
  }
}
</script>

<style lang='less' scoped>
.login {
  width: 100%;
  height: 100%;
  background-color: #2f4050;
  .el-form {
    width: 400px;
    padding: 70px 20px 20px 20px;
    background-color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    border-radius: 10px; 
    .headerPic {
      width: 130px;
      height: 130px;
      border-radius: 100%;
      box-shadow: 0px 3px 5px #ccc;
      position: absolute;
      top: -70px;
      left: 50%;
      transform: translateX(-50%);
      background-color: #fff;
      img {
        width: 100px;
        height: 100px;
        position: relative;
        top: 25px;
      }
    }
  }
}
</style>
